<template>
  <panel title="商品列表">
    <el-row>
      <el-col :lg="15"
        >商品名字：<el-input v-model="goodsInfo.name"></el-input
      ></el-col>
      <el-col :lg="5">
        商品分类：<el-select v-model="goodsInfo.category">
          <el-option
            v-for="(item, index) in categoryList"
            :key="index"
            :label="item.cateName"
            :value="item.cateName"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :lg="2">
        <el-button @click="getGoodsList">查询</el-button>
      </el-col>
    </el-row>

    <el-table :data="goodsList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-row>
            <el-col :lg="12" :xl="21">商品名字：{{ scope.row.name }}</el-col>
            <el-col :lg="12" :xl="1">价格:{{ scope.row.price }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="商品名字" prop="name"> </el-table-column>
      <el-table-column label="分类" prop="category"> </el-table-column>
      <el-table-column label="价格" prop="price"> </el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img width="100px" :src="BASE_URL + scope.row.imgUrl" />
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="changeGoods(scope)">编辑</el-button>
          <el-button>删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 7, 10, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <goods-form @form="form" :defaultForm="curGoods" type="edit"></goods-form>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </panel>
</template>

<script>
import {
  getGoodsListReq,
  goodsCateListReq,
  goodsEditReq,
} from "@/api/goods.api";
import { goodsClear } from "@/utils/common";
import goodsForm from "./components/GoodsForm.vue";
import { BASE_URL } from "@/utils/common";
export default {
  components: {
    goodsForm,
  },
  data() {
    return {
      dialogVisible: false,
      pageInfo: {
        currentPage: 1,
        pageSize: 5,
      },
      goodsInfo: {
        name: "",
        category: "",
      },
      goodsList: [],
      total: null,
      curGoods: {},
      categoryList: [],
      currentPage4: 1,
      BASE_URL,
    };
  },
  methods: {
    getGoodsList() {
      let list = goodsClear({ ...this.pageInfo, ...this.goodsInfo });
      // console.log(list);
      getGoodsListReq(list).then((res) => {
        // console.log(res);
        this.goodsList = res.data.data;
        this.total = res.data.total;
      });
    },
    changeGoods(scope) {
      this.dialogVisible = true;
      // console.log(scope.row);
      this.curGoods = scope.row;
    },
    form(form) {
      console.log(form);
      form.price = String(form.price);
      goodsEditReq(form).then((res) => {
        console.log(res);
        this.dialogVisible = false;
        this.getGoodsList();
      });
    },

    handleSizeChange(val) {
      // this.pageinfo.currentPage = val
      console.log(val);
      //改变每页数量
      this.pageInfo.pageSize = val;
      //重新调用listGet
      this.getGoodsList();
    },

    handleCurrentChange(val) {
      // 改变页码
      this.pageInfo.currentPage = val;
      // 重新调用listGet
      this.getGoodsList();
    },
  },

  created() {
    this.getGoodsList();
    goodsCateListReq().then((res) => {
      console.log(res);
      res.data.data.forEach(item => {
        if(item.state){
          this.categoryList.push(item)
        }
      });
      
    });
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>